
<template>
  <el-card>
    <template #header>
      <span>系统设置</span>
    </template>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" style="max-width: 500px;">
    <el-form-item label="站点名称" prop="siteName">
      <el-input v-model="form.siteName" :disabled="!isAdmin" />
    </el-form-item>
    <el-form-item label="Logo地址" prop="logoUrl">
      <el-input v-model="form.logoUrl" :disabled="!isAdmin" />
    </el-form-item>
    <el-form-item label="通知邮箱" prop="notifyEmail">
      <el-input v-model="form.notifyEmail" :disabled="!isAdmin" />
    </el-form-item>
    <el-form-item label="系统主题色" prop="themeColor">
      <el-color-picker v-model="form.themeColor" :disabled="!isAdmin" />
    </el-form-item>
    <el-form-item label="最大登录尝试" prop="maxLogin">
      <el-input-number v-model="form.maxLogin" :disabled="!isAdmin" :min="1" :max="10" />
      <el-tag type="danger" style="margin-left:10px;">当前失败次数：{{ loginFailCount }}</el-tag>
      <el-button type="text" @click="simulateLoginFail" style="margin-left:10px;">模拟失败</el-button>
      <el-button type="text" @click="resetLoginFail" style="margin-left:5px;">重置</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSave" v-if="isAdmin">保存设置</el-button>
      <el-alert v-else type="info" title="只有管理员可以修改系统设置" show-icon style="margin-left: 10px;" />
      <el-button type="text" @click="toggleAdmin" style="margin-left: 20px;">切换身份</el-button>
    </el-form-item>
  </el-form>
  <el-divider />
  <el-descriptions title="当前配置" :column="1" border>
    <el-descriptions-item label="站点名称">{{ form.siteName }}</el-descriptions-item>
    <el-descriptions-item label="Logo地址">{{ form.logoUrl }}</el-descriptions-item>
    <el-descriptions-item label="通知邮箱">{{ form.notifyEmail }}</el-descriptions-item>
    <el-descriptions-item label="系统主题色"><span :style="{background: form.themeColor, padding: '0 10px'}">{{ form.themeColor }}</span></el-descriptions-item>
    <el-descriptions-item label="最大登录尝试">{{ form.maxLogin }}</el-descriptions-item>
  </el-descriptions>
  <el-divider />
  <el-card>
    <template #header>
      <span>配置变更历史</span>
    </template>
    <el-table :data="history" style="width:100%" border>
      <el-table-column prop="time" label="时间" width="180" />
      <el-table-column prop="user" label="用户" width="120" />
      <el-table-column prop="detail" label="变更内容" />
    </el-table>
  </el-card>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref()
const form = reactive({
  siteName: '',
  logoUrl: '',
  notifyEmail: ''
})
const rules = {
  siteName: [{ required: true, message: '请输入站点名称', trigger: 'blur' }],
  logoUrl: [{ required: true, message: '请输入Logo地址', trigger: 'blur' }],
  notifyEmail: [{ required: true, message: '请输入通知邮箱', trigger: 'blur' }]
}

// 模拟当前用户角色
const isAdmin = ref(false)
function fetchUserRole() {
  // 随机模拟管理员或普通用户
  isAdmin.value = Math.random() > 0.5
}

// 模拟系统配置
function fetchConfig() {
  Object.assign(form, {
    siteName: '通用管理系统',
    logoUrl: 'https://dummyimage.com/100x40/2451a6/fff.png&text=Logo',
    notifyEmail: 'admin@system.com'
  })
}

// 保存并写入模拟日志
function onSave() {
  formRef.value.validate().then(() => {
    window.localStorage.setItem('system_config', JSON.stringify(form))
    ElMessage.success('配置保存成功！')
    // 写入模拟日志
    let logs = JSON.parse(localStorage.getItem('operation_logs') || '[]')
    logs.unshift({
      time: new Date().toLocaleString(),
      user: isAdmin.value ? '管理员' : '普通用户',
      action: '系统设置',
      detail: `修改系统设置：${JSON.stringify(form)}`
    })
    localStorage.setItem('operation_logs', JSON.stringify(logs))
  })
}

onMounted(() => {
  fetchUserRole()
  fetchConfig()
})
</script>
